<template>
    <!-- 头部搜索框组件 -->
    <div class="search">
        <div class="search_left">
            <img class="search_left_img" src="@/assets/commodity/icon_sousuo.png" alt="">
            <input :value="value" type="text" :placeholder="placeholder"
                @input="(e: any) => emit('update:value', e.target?.value)">
            <div class="search_clear" v-if="value && (clearabl === '' || clearabl)" @click="clearablClick">
                <img class="search_clear_img" src="@/assets/porduct/icon_inputClone.png" alt="">
            </div>
            <van-button class="search_left_button" round type="primary" @click="emit('onSubmit', value)">搜索</van-button>
        </div>
        <div class="commodity_classify_div" @click="clearablClick2" v-if="isFiltrate">
            <img src="@/assets/newui/productList/icon_shaixuan@2x.png" alt="">
        </div>
    </div>
</template>
<script setup lang="ts">
import { defineEmits, defineProps } from 'vue'

defineProps({
    value: { default: '' },
    placeholder: { default: '请输入商品名称 / 商品码或69码 / 库存编码' },
    clearabl: {},
    isFiltrate: { default: true }
})

const emit = defineEmits(['update:value', 'onSubmit', 'screenIsShow_on'])
const clearablClick2 = () => {
    emit('screenIsShow_on', '')
}
const clearablClick = () => {
    emit('update:value', '')
    emit('onSubmit', '')
}

</script>

<style lang="less" scoped>
@import url(../style/index.less);

.commodity_classify_div {
    // flex: 0.3;
    margin-left: 10px;

    img {
        padding-top: 5px;
        width: 24px;
        height: 24px;
    }
}
</style>